<template>
  <el-card class="box-card">
    <div>
      <!-- 搜索框 -->
      <el-form
        ref="dataFrom"
        :inline="true"
        :model="dataFrom"
        class="demo-form-inline"
      >
        <el-form-item label="档案号：">
          <el-input
            v-model="dataFrom.dah"
            clearable
            placeholder="档案号"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input
            v-model="dataFrom.xm"
            clearable
            placeholder="姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门：">
          <el-select v-model="dataFrom.bm" allow-create clearable default-first-option filterable placeholder="请选择">
            <el-option
              v-for="item in EmployeeSearchOption.bm"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别：">
          <el-select v-model="dataFrom.xb" allow-create clearable default-first-option filterable placeholder="请选择">
            <el-option
              v-for="item in EmployeeSearchOption.xb"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="民族：">
          <el-select v-model="dataFrom.mz" allow-create clearable default-first-option filterable placeholder="请选择">
            <el-option
              v-for="item in EmployeeSearchOption.mz"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="就职状态：">-->
        <!--          <el-select v-model="dataFrom.jzzt" allow-create clearable default-first-option filterable-->
        <!--                     placeholder="请选择">-->
        <!--            <el-option-->
        <!--              v-for="item in EmployeeSearchOption.jzzt"-->
        <!--              :key="item"-->
        <!--              :label="item"-->
        <!--              :value="item"-->
        <!--            >-->
        <!--            </el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="职务：">
          <el-input
            v-model="dataFrom.zw"
            clearable
            placeholder="职务"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号：">
          <el-input
            v-model="dataFrom.sfz"
            clearable
            placeholder="职务"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            type="primary"
            @click="getDataListBySearch"
          >查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="dialogFormVisible = true">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="DaoRu_dialogFormVisible = true">导入</el-button>
        </el-form-item>
        <el-form-item v-if="multipleSelection.length>0">
          <el-button type="primary" @click="exportCheck()">
            导出选择
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="exportAll()">
            导出全部
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 角色数据表单 -->
      <el-table ref="multipleTable" :data="dataList" border style="width: 100%"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column label="档案号" prop="dah" width="80">
        </el-table-column>
        <el-table-column label="姓名" prop="xm" width="130">
        </el-table-column>
        <el-table-column label="部门" prop="bm" width="130">
        </el-table-column>
        <el-table-column label="性别" prop="xb" width="80">
        </el-table-column>
        <el-table-column label="就职状态" prop="jzzt" width="180">
        </el-table-column>
        <el-table-column label="手机号码" prop="sjh" width="130">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleLook(scope.$index, scope.row)"
            >
              查看详情
            </el-button>
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
            >删除
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 新增按钮打开的页面 -->
      <el-dialog :visible.sync="dialogFormVisible" title="新增员工" width="50%">
        <el-form ref="form" :model="insertForm" label-width="150px">
          <el-form-item label="姓名">
            <el-input v-model="insertForm.xm"></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="insertForm.sfz"></el-input>
          </el-form-item>
          <el-form-item label="民族：">
            <el-select v-model="insertForm.mz" allow-create clearable default-first-option filterable
                       placeholder="请选择">
              <el-option
                v-for="item in EmployeeSearchOption.mz"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!--          <el-form-item label="是否签合同">-->
          <!--            <el-radio v-model="insertForm.ht" label="已签"></el-radio>-->
          <!--            <el-radio v-model="insertForm.ht" label="未签"></el-radio>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="合同时间">-->
          <!--            <el-col :span="11">-->
          <!--              <el-date-picker v-model="insertForm.htks" placeholder="开始时间" style="width: 100%;"-->
          <!--                              type="date"></el-date-picker>-->
          <!--            </el-col>-->
          <!--            <el-col :span="1">-</el-col>-->
          <!--            <el-col :span="12">-->
          <!--              <el-date-picker v-model="insertForm.htjs" placeholder="结束时间" style="width: 100%;"-->
          <!--                              type="date"></el-date-picker>-->
          <!--            </el-col>-->
          <!--          </el-form-item>-->
          <el-form-item label="现住址">
            <el-input v-model="insertForm.xzz"></el-input>
          </el-form-item>
          <el-form-item label="部门">
            <el-select v-model="insertForm.bm" allow-create clearable default-first-option filterable
                       placeholder="请选择所在部门">
              <el-option
                v-for="item in EmployeeSearchOption.bm"
                :key="item"
                :label="item"
                :value="item"/>
            </el-select>
          </el-form-item>
          <el-form-item label="职务">
            <el-input v-model="insertForm.zw"></el-input>
          </el-form-item>
          <el-form-item label="毕业学校">
            <el-input v-model="insertForm.byxx" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="专业">
            <el-input v-model="insertForm.zy" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="学历">
            <el-input v-model="insertForm.xl" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="职称及证件">
            <el-input v-model="insertForm.zcjzj" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="招聘来源">
            <el-input v-model="insertForm.zply" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="insertForm.sjh" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="银行卡号">
            <el-input v-model="insertForm.yhkh" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="银行卡备注">
            <el-input v-model="insertForm.yhkbz" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="紧急联系人">
            <el-input v-model="insertForm.jjlxr" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="紧急联系人电话">
            <el-input v-model="insertForm.jjlxrdh" type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleInsert()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 导入员工 -->
      <el-dialog :visible.sync="DaoRu_dialogFormVisible" title="导入员工" width="35%">
        <el-form :model="formChange">
          <el-form-item label="" label-width="120px">
            <el-upload
              :auto-upload="false"
              :before-upload="handleBeforeUpload"
              :file-list="fileList"
              :limit="fileLimit"
              :multiple="true"
              :on-change="handleChangeFile"
              :on-exceed="handleExceed"
              :show-file-list="true"
              action="#"
              drag
              list-type="text"
              name="file"
              style="margin-top: 10px;"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div slot="tip" class="el-upload__tip">只能上传xls,xlsx文件，且不超过{{ this.fileSize }}kb</div>
            </el-upload>
            <el-button type="primary" @click="handleImport()">导 入</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 编辑按钮打开的页面 -->
      <el-dialog
        :visible.sync="dialogFormVisibleChange"
        title="编辑员工信息"
        width="35%"
      >
        <el-form :model="formChange">
          <el-form-item label="姓名" label-width="120px">
            <el-input
              v-model="formChange.xm"
              autocomplete="off"
              placeholder="账号"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别" label-width="120px">
            <el-select v-model="formChange.xb" placeholder="无">
              <el-option
                v-for="item in EmployeeSearchOption.xb"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份证号" label-width="120px">
            <el-input
              v-model="formChange.sfz"
              autocomplete="off"
              placeholder="身份证号"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号码" label-width="120px">
            <el-input
              v-model="formChange.sjh"
              autocomplete="off"
              placeholder="手机号码"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="民族" label-width="120px">
            <el-input
              v-model="formChange.mz"
              autocomplete="off"
              placeholder="民族"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="籍贯" label-width="120px">
            <el-input
              v-model="formChange.jg"
              autocomplete="off"
              placeholder="籍贯"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="户口所在地" label-width="120px">
            <el-input
              v-model="formChange.hkszd"
              autocomplete="off"
              placeholder="户口所在地"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="紧急联系人" label-width="120px">
            <el-input
              v-model="formChange.jjlxr"
              autocomplete="off"
              placeholder="紧急联系人"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="紧急联系人电话" label-width="120px">
            <el-input
              v-model="formChange.jjlxrdh"
              autocomplete="off"
              placeholder="紧急联系人电话"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="现住址" label-width="120px">
            <el-input
              v-model="formChange.xzz"
              autocomplete="off"
              placeholder="现住址"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="银行卡号" label-width="120px">
            <el-input
              v-model="formChange.yhkh"
              autocomplete="off"
              placeholder="银行卡号"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="银行卡备注" label-width="120px">
            <el-input
              v-model="formChange.yhkbz"
              autocomplete="off"
              placeholder="银行卡备注"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="毕业学校" label-width="120px">
            <el-input
              v-model="formChange.byxx"
              autocomplete="off"
              placeholder="毕业学校"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="学历" label-width="120px">
            <el-input
              v-model="formChange.xl"
              autocomplete="off"
              placeholder="学历"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="专业" label-width="120px">
            <el-input
              v-model="formChange.zy"
              autocomplete="off"
              placeholder="专业"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="职称及证件" label-width="120px">
            <el-input
              v-model="formChange.zcjzj"
              autocomplete="off"
              placeholder="职称及证件"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="部门" label-width="120px">
            <el-select v-model="formChange.bm" allow-create clearable default-first-option filterable
                       placeholder="请选择">
              <el-option
                v-for="item in EmployeeSearchOption.bm"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="就职状态" label-width="120px">
            <el-select v-model="formChange.jzzt" allow-create clearable default-first-option filterable
                       placeholder="请选择">
              <el-option label="在职" value="在职"></el-option>
              <el-option label="离职" value="离职"></el-option>
              <el-option label="退休" value="退休"></el-option>
              <el-option label="临时工" value="临时工"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="招聘来源" label-width="120px">
            <el-input
              v-model="formChange.zply"
              autocomplete="off"
              placeholder="招聘来源"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="合同" label-width="120px">
            <el-select v-model="formChange.ht" allow-create clearable default-first-option filterable
                       placeholder="请选择">
              <el-option label="已签" value="已签"></el-option>
              <el-option label="未签" value="未签"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="formChange.ht==='已签约'" label="合同时间">
            <el-col :span="11">
              <el-date-picker v-model="formChange.htks" placeholder="开始时间" style="width: 100%;"
                              type="date"></el-date-picker>
            </el-col>
            <el-col :span="1">-</el-col>
            <el-col :span="12">
              <el-date-picker v-model="formChange.htjs" placeholder="结束时间" style="width: 100%;"
                              type="date"></el-date-picker>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleChange = false">取 消</el-button>
          <el-button type="primary" @click="handleChange()">更 新</el-button>
        </div>
      </el-dialog>
      <!-- 查看打开的界面 -->
      <el-dialog
          :model="formLook"
          :visible.sync="dialogFormVisibleLook"
          width="80%"
          style="margin-top: -5%"
      >
        <!--标题-->
        <div slot="title" class="title1">
          <el-button v-for="{title,list} in titleList" :key="title" class="title2" type="primary"
                     @click="clickTitle(list)">{{ title }}
          </el-button>
        </div>
        <el-divider></el-divider>
        <!-- 内容-->
        <div style="margin-top: -5%">
          <!--员工详细信息表-->
          <div v-if="dialogFormVisibleLookList.xxxx">
            <el-descriptions title="基础信息">
              <el-descriptions-item label="姓名">
                {{ this.formLook.xm }}
              </el-descriptions-item>
              <el-descriptions-item label="年龄">
                {{ this.formLook.nl }}
              </el-descriptions-item>
              <el-descriptions-item label="出生日期">
                {{ this.formLook.csrq }}
              </el-descriptions-item>
              <el-descriptions-item label="性别">
                {{ this.formLook.xb }}
              </el-descriptions-item>
              <el-descriptions-item label="身份证号">
                {{ this.formLook.sfz }}
              </el-descriptions-item>
              <el-descriptions-item label="手机号">
                {{ this.formLook.sjh }}
              </el-descriptions-item>
              <el-descriptions-item label="民族">
                {{ this.formLook.mz }}
              </el-descriptions-item>
              <el-descriptions-item label="籍贯">
                {{ this.formLook.jg }}
              </el-descriptions-item>
              <el-descriptions-item label="户口所在地">
                {{ this.formLook.hkszd }}
              </el-descriptions-item>
              <el-descriptions-item label="紧急联系人">
                {{ this.formLook.jjlxr }}
              </el-descriptions-item>
              <el-descriptions-item label="紧急联系人电话">
                {{ this.formLook.jjlxrdh }}
              </el-descriptions-item>
            </el-descriptions>
            <!--单独一行-->
            <el-descriptions>
              <el-descriptions-item label="现住址">
                {{ this.formLook.xzz }}
              </el-descriptions-item>
            </el-descriptions>
            <!--单独一行-->
            <el-descriptions>
              <el-descriptions-item label="银行卡号">
                {{ this.formLook.yhkh }}
              </el-descriptions-item>
              <el-descriptions-item label="银行卡备注">
                {{ this.formLook.yhkbz }}
              </el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
            <el-descriptions title="学历信息">
              <el-descriptions-item label="毕业学校">
                {{ this.formLook.byxx }}
              </el-descriptions-item>
              <el-descriptions-item label="学历">
                {{ this.formLook.xl }}
              </el-descriptions-item>
              <el-descriptions-item label="专业">
                {{ this.formLook.zy }}
              </el-descriptions-item>
              <el-descriptions-item label="职称及证件">
                {{ this.formLook.zcjzj }}
              </el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
            <el-descriptions title="岗位信息">
              <el-descriptions-item label="档案号">
                {{ this.formLook.dah }}
              </el-descriptions-item>
              <el-descriptions-item label="部门">
                {{ this.formLook.bm }}
              </el-descriptions-item>
              <el-descriptions-item label="职务">
                {{ this.formLook.zw }}
              </el-descriptions-item>
              <el-descriptions-item label="入职日期">
                {{ this.formLook.rzrq }}
              </el-descriptions-item>
              <el-descriptions-item label="就职状态">
                {{ this.formLook.jzzt }}
              </el-descriptions-item>
              <el-descriptions-item label="招聘来源">
                {{ this.formLook.zply }}
              </el-descriptions-item>
              <el-descriptions-item label="入场年限">
                {{ this.formLook.rcnx }}
              </el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
            <el-descriptions title="合同信息">
              <el-descriptions-item label="合同">
                {{ this.formLook.ht }}
              </el-descriptions-item>
              <el-descriptions-item label="合同开始">
                {{ this.formLook.htks }}
              </el-descriptions-item>
              <el-descriptions-item label="合同结束">
                {{ this.formLook.htjs }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <!--信息登记表-->
          <div v-if="dialogFormVisibleLookList.xxdjb" >
            <div style="min-height: 500px">
              <div>
                <img id="picture" :src="this.image_xxdjb" alt="用户未上传电子版" style="width: 100%"/>
              </div>
              <div v-if="this.image_xxdjb.length===0" style="margin-top: 25%;margin-left: 25%">
                <el-upload
                  ref="upload"
                  :before-upload="handlePictureBeforeUpload"
                  :file-list="fileList"
                  :headers="headers"
                  :http-request="insertXxdjb"
                  :limit="fileLimit"
                  :on-change="handleChangeFile"
                  :on-exceed="handleExceed"
                  action="#"
                  list-type="picture"
                  name="file"
                >
                  <el-button style="transform: translate(50%, 0)" type="primary">上传信息登记表<i
                    class="el-icon-upload el-icon--right"></i></el-button>
                  <div slot="tip" class="iptFile">
                    支持上传png,jpg,gif等多种文件,但不超过2MB
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          <!--学士学位证书-->
          <div v-if="dialogFormVisibleLookList.xsxwzs"  >
            <div style="min-height: 500px">
              <div>
                <img id="picture" :src="this.image_xsxwzs" alt="用户未上传电子版" style="width: 100%"/>
              </div>
              <div v-if="this.image_xsxwzs.length===0" style="margin-top: 25%;margin-left: 25%">
                <el-upload
                  ref="upload"
                  :before-upload="handlePictureBeforeUpload"
                  :file-list="fileList"
                  :headers="headers"
                  :http-request="insertXsxwzs"
                  :limit="fileLimit"
                  :on-change="handleChangeFile"
                  :on-exceed="handleExceed"
                  action="#"
                  list-type="picture"
                  name="file"
                >
                  <el-button style="transform: translate(50%, 0)" type="primary">上传学士学位证书<i
                    class="el-icon-upload el-icon--right"></i></el-button>
                  <div slot="tip" class="iptFile">
                    支持上传png,jpg,gif等多种文件,但不超过2MB
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          <!--毕业证书-->
          <div v-if="dialogFormVisibleLookList.byzs">
            <div style="min-height: 500px">
              <div>
                <img id="picture" :src="this.image_byzs" alt="用户未上传电子版" style="width: 100%"/>
              </div>
              <div v-if="this.image_byzs.length===0" style="margin-top: 25%;margin-left: 25%">
                <el-upload
                  ref="upload"
                  :before-upload="handlePictureBeforeUpload"
                  :file-list="fileList"
                  :headers="headers"
                  :http-request="insertByzs"
                  :limit="fileLimit"
                  :on-change="handleChangeFile"
                  :on-exceed="handleExceed"
                  action="#"
                  list-type="picture"
                  name="file"
                >
                  <el-button style="transform: translate(50%, 0)" type="primary">上传毕业证书<i
                    class="el-icon-upload el-icon--right"></i></el-button>
                  <div slot="tip" class="iptFile">
                    支持上传png,jpg,gif等多种文件,但不超过2MB
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          <!--职称证书-->
          <div v-if="dialogFormVisibleLookList.zczs">
            <div style="min-height: 500px">
              <div>
                <img id="picture" :src="this.image_zczs" alt="用户未上传电子版" style="width: 100%"/>
              </div>
              <div v-if="this.image_zczs.length===0" style="margin-top: 25%;margin-left: 25%">
                <el-upload
                  ref="upload"
                  :before-upload="handlePictureBeforeUpload"
                  :file-list="fileList"
                  :headers="headers"
                  :http-request="insertZczs"
                  :limit="fileLimit"
                  :on-change="handleChangeFile"
                  :on-exceed="handleExceed"
                  action="#"
                  list-type="picture"
                  name="file"
                >
                  <el-button style="transform: translate(50%, 0)" type="primary">上传职称证书<i
                    class="el-icon-upload el-icon--right"></i></el-button>
                  <div slot="tip" class="iptFile">
                    支持上传png,jpg,gif等多种文件,但不超过2MB
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          <!--身份证-->
          <div v-if="dialogFormVisibleLookList.sfz">
            <div style="min-height: 500px">
              <div>
                <img id="picture" :src="this.image_sfz" alt="用户未上传电子版" style="width: 100%"/>
              </div>
              <div v-if="this.image_sfz.length===0" style="margin-top: 25%;margin-left: 25%">
                <el-upload
                  ref="upload"
                  :before-upload="handlePictureBeforeUpload"
                  :file-list="fileList"
                  :headers="headers"
                  :http-request="insertSfz"
                  :limit="fileLimit"
                  :on-change="handleChangeFile"
                  :on-exceed="handleExceed"
                  action="#"
                  list-type="picture"
                  name="file"
                >
                  <el-button style="transform: translate(50%, 0)" type="primary">上传身份证<i
                    class="el-icon-upload el-icon--right"></i></el-button>
                  <div slot="tip" class="iptFile">
                    支持上传png,jpg,gif等多种文件,但不超过2MB
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          <!--驾驶本-->
          <div v-if="dialogFormVisibleLookList.jsb">
            <div style="min-height: 500px">
              <div>
                <img id="picture" :src="this.image_jsb" alt="用户未上传电子版" style="width: 100%"/>
              </div>
              <div v-if="this.image_jsb.length===0" style="margin-top: 25%;margin-left: 25%">
                <el-upload
                  ref="upload"
                  :before-upload="handlePictureBeforeUpload"
                  :file-list="fileList"
                  :headers="headers"
                  :http-request="insertJsb"
                  :limit="fileLimit"
                  :on-change="handleChangeFile"
                  :on-exceed="handleExceed"
                  action="#"
                  list-type="picture"
                  name="file"
                >
                  <el-button style="transform: translate(50%, 0)" type="primary">上传驾驶本<i
                    class="el-icon-upload el-icon--right"></i></el-button>
                  <div slot="tip" class="iptFile">
                    支持上传png,jpg,gif等多种文件,但不超过2MB
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
      <!-- 页号 -->
      <el-pagination
        :current-page="pageIndex"
        :page-size="pageSize"
        :page-sizes="[5, 10, 20, 50, 100]"
        :total="totalPage"
        layout="total ,sizes,prev,pager,next,jumper"
        style="margin-top: 30px"
        @size-change="sizeChangeHandle"
        @current-change="CurrentChangeHandle"
      >
      </el-pagination>
    </div>
  </el-card>
</template>
<script>
import xlsx from "vform-builds";

export default {
  name: "index",
  data() {
    return {
      username: sessionStorage.getItem("username"),
      multipleSelection: [], //批量操作数组
      dataFrom: {},//搜索
      formLook: {}, //查看
      insertForm: {},//新增
      formChange: {}, //编辑
      dataList: [], //页面展示的数据集合
      EmployeeSearchOption: {},//搜索选项
      fileList: [], //上传文件，以数组方式上传
      fileListed: 0, //上传过的文件
      fileLimit: 5, //文件上传个数限制
      fileSize: 10,//文件限制大小
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      begin: 0,
      end: this.pageSize - 1,
      dialogFormVisible: false, //默认关闭新建员工界面
      DaoRu_dialogFormVisible: false, //默认关闭导入员工界面
      dialogFormVisibleChange: false, //默认关闭编辑员工界面
      dialogFormVisibleLook: false,//默认关闭查看员工界面
      dataListFrom: "getDataList",
      titleList: [
        {
          title: "员工详细信息",
          list: "xxxx"
        },
        {
          title: "信息登记表",
          list: "xxdjb"
        },
        {
          title: "学士学位证书",
          list: "xsxwzs"
        },
        {
          title: "毕业证书",
          list: "byzs"
        },
        {
          title: "职称证书",
          list: "zczs"
        },
        {
          title: "身份证",
          list: "sfz"
        },
        {
          title: "驾驶本",
          list: "jsb"
        }
      ],//详细列表标题
      dialogFormVisibleLookList: {
        "xxxx": true,//默认显示员工详细信息
        "xxdjb": false,
        "xsxwzs": false,
        "byzs": false,
        "zczs": false,
        "sfz": false,
        "jsb": false
      },//查看员工界面各个标题对应的界面
      image_xxdjb: "",//信息登记表电子版
      image_xsxwzs: "",//学士学位表电子版
      image_byzs: "",//毕业证书电子版
      image_zczs: "",//职称电子版
      image_sfz: "",//身份证电子版
      image_jsb: "",//驾驶本电子版
      headers: {"Content-Type": "multipart/form-data",},
      picturePath: "",//上传的图片本地位置
    };
  },
  methods: {
    //改变数组大小
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.SizeOrCurrentChangeAfter();
    },
    //改变当前页号
    CurrentChangeHandle(val) {
      this.pageIndex = val;
      this.SizeOrCurrentChangeAfter();
    },
    //在更改数组大小或者页号前，判断数据来源
    SizeOrCurrentChangeAfter() {
      if (this.dataListFrom === "getDataList")
        this.getDataList();
      else this.getDataListBySearch();
    },
    //新增页面的确认键
    handleInsert() {
      if (this.insertForm.csrq !== undefined) {
        this.insertForm.csrq = this.insertForm.csrq.toLocaleDateString()
      }
      if (this.insertForm.htks !== undefined) {
        this.insertForm.htks = this.insertForm.htks.toLocaleDateString()
      }
      if (this.insertForm.htjs !== undefined) {
        this.insertForm.htjs = this.insertForm.htjs.toLocaleDateString()
      }
      const data = {
        pageBo: this.$getPageInfo(this.pageSize, this.pageIndex),
        employee: this.insertForm
      }
      this.$http.post("/employee/insertEmployee", data).then((res) => {
        this.cutDataList(res.data);
        this.dialogFormVisible = false;
        this.insertForm = []
      });
    },
    //编辑页面的确认键
    handleChange() {
      const data = {
        employee: this.formChange,
        pageBo: this.$getPageInfo(this.pageSize, this.pageIndex),
      }
      this.$http.post("/employee/updateEmployee", data).then((res) => {
        this.dialogFormVisibleChange = false;
        this.getDataList();
      });
    },
    //将数据分配到数组中
    cutDataList(res) {
      const data = this.$cutPageDataList(res)
      this.dataList = data.dataList
      this.totalPage = data.totalPage
    },
    //查询所有数据
    getDataList() {
      this.dataListFrom = "getDataList";
      const pageInfo = this.$getPageInfo(this.pageSize, this.pageIndex)
      this.$http.post("/employee/getEmployees", pageInfo).then((res) => {
        this.cutDataList(res);
      });
    },
    //查询单条数据
    getDataListBySearch() {
      this.dataListFrom = "getDataListBySearch";
      const data = {
        employee: this.dataFrom,
        pageBo: this.$getPageInfo(this.pageSize, this.pageIndex)
      }
      this.$http.post("/employee/getEmployeeBySearch", data).then((res) => {
        this.cutDataList(res);
      });
    },
    //查看按钮
    handleLook(index, item) {
      this.clickTitle("xxxx");
      this.dialogFormVisibleLook = true;
      this.formLook = item;
    },
    //编辑按钮
    handleEdit(index, item) {
      this.dialogFormVisibleChange = true; //打开编辑员工界面
      //回显数据
      this.formChange = item;
    },
    //删除按钮
    handleDelete(item) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 表示处理的是 删除操作
          const pageInfo = this.$getPageInfo(this.pageSize, this.pageIndex)
          this.$http.post("/employee/deleteEmployee/" + item, pageInfo).then((res) => {
            this.cutDataList(res);
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    //取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //搜索的选择项
    getEmployeeSearchOption() {
      this.$http.post("/employee/EmployeeSearchOption").then((res) => {
        this.EmployeeSearchOption = res
      });
    },
    //上传前的校验
    handleBeforeUpload(file) {
      const uploadTypes = ["xlsx", "xls"];
      const filetype = file.name.replace(/.+\./, "");
      const isRightSize = (file.size || 0) / 1024 / 1024 < this.fileSize;
      if (!isRightSize) {
        this.$message.error("文件大小超过 " + this.fileSize + "MB");
        return false;
      }
      if (uploadTypes.indexOf(filetype.toLowerCase()) === -1) {
        this.$message.warning({
          message:
            "请上传后缀名为xls,xlsx的附件",
        });
        return false;
      }
      return true;
    },
    //文件数量改变
    handleChangeFile(file, fileList) {
      this.fileList = fileList;
    },
    //超出文件个数的回调
    handleExceed() {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！",
      });
    },
    //导入的xls传到后端
    handleImport() {
      //上传文件的需要FormData类型;所以要转
      const FormDates = new FormData();
      this.fileList.forEach((val) => {
        FormDates.append("files", val.raw);
      });
      this.$http.post("/import/employee",
        FormDates, {headers: {"Content-Type": "",}}
      ).then(() => {
        this.DaoRu_dialogFormVisible = false;
        this.getDataList();
      });
    },
    //导出全部
    exportAll() {
      this.export([])
    },
    //导出所选
    exportCheck() {
      this.export(this.multipleSelection)
    },
    //表格被点击，添加data数组数据
    handleSelectionChange(data) {
      this.multipleSelection = []
      data.forEach(val => {
        this.multipleSelection.push(val.id)
      })
      console.log(data[0])
    },
    //导出数据生辰exl表格
    export(item) {
      this.$http.post("/export/employee", item).then(res => {
        this.$exportExcel(res)
      })
    },
    //切换查看窗口显示内容
    clickTitle(list) {
      this.image_xxdjb = "",//信息登记表电子版
      this.image_xsxwzs = "",//学士学位表电子版
      this.image_byzs = "",//毕业证书电子版
      this.image_zczs = "",//职称电子版
      this.image_sfz = "",//身份证电子版
      this.image_jsb = ""//驾驶本电子版
      for (let i in this.dialogFormVisibleLookList) {
        this.dialogFormVisibleLookList[i] = false
      }
      this.dialogFormVisibleLookList[list] = true
      const id = this.formLook.id
      if ("xxdjb" === list) {
        this.getXxdjb(id)
      }
      if ("xsxwzs" === list) {
        this.getXsxwzs(id)
      }
      if ("byzs" === list) {
        this.getByzs(id)
      }
      if ("zczs" === list) {
        this.getZczs(id)
      }
      if ("sfz" === list) {
        this.getSfz(id)
      }
      if ("jsb" === list) {
        this.getJsb(id)
      }

    },
    //上传照片
    uploadPicture(callback) {
      this.$message("文件上传中........");
      //上传文件的需要FormData类型;所以要转
      const FormDates = new FormData();
      this.fileList.forEach((val) => {
        FormDates.append("file", val.raw);
      });
      this.$http.post("/upload/image", FormDates, {headers: {"Content-Type": "",}})
        .then((res) => {
          this.fileList = [];
          callback(res)
        });
    },
    //上传照片前的校验
    handlePictureBeforeUpload(file) {
      const pictureSize = 100
      const uploadTypes = ["png", "jpg", "gif"];
      const filetype = file.name.replace(/.+\./, "");
      const isRightSize = (file.size || 0) / 1024 / 1024 < pictureSize;
      if (!isRightSize) {
        this.$message.error("文件大小超过 " + pictureSize + "MB");
        return false;
      }
      if (uploadTypes.indexOf(filetype.toLowerCase()) === -1) {
        this.$message.warning({
          message:
            "请上传后缀名为png,jpg,gif的图片",
        });
        return false;
      }
      return true;
    },
    //获取信息登记表
    getXxdjb(id) {
      this.$http.post("/employee/getXxdjb/" + id).then((res) => {
        if (res !== null) {
          this.image_xxdjb = this.$unzip(res["image"])
        } else {
          this.image_xxdjb = ""
        }
      });
    },
    //插入信息登记表
    insertXxdjb() {
      const id = this.formLook.id
      this.uploadPicture(callback =>
        this.$http.post("/employee/insertXxdjb", {
          image: callback,
          employeeId: id
        }).then(() => {
          this.getXxdjb(id)
        })
      )
    },
    //获取学士学位证书
    getXsxwzs(id) {
      this.$http.post("/employee/getXsxwzs/" + id).then((res) => {
        if (res !== null) {
          this.image_xsxwzs = this.$unzip(res["image"])
        } else {
          this.image_xsxwzs = ""
        }
      });
    },
    //插入学士学位证书
    insertXsxwzs() {
      const id = this.formLook.id
      this.uploadPicture(callback =>
        this.$http.post("/employee/insertXsxwzs", {
          image: callback,
          employeeId: id
        }).then(() => {
          this.getXsxwzs(id)
        })
      )
    },
    //获取毕业证书
    getByzs(id) {
      this.$http.post("/employee/getByzs/" + id).then((res) => {
        if (res !== null) {
          this.image_byzs = this.$unzip(res["image"])
        } else {
          this.image_byzs = ""
        }
      });
    },
    //插入毕业证书
    insertByzs() {
      const id = this.formLook.id
      this.uploadPicture(callback =>
        this.$http.post("/employee/insertByzs", {
          image: callback,
          employeeId: id
        }).then(() => {
          this.getByzs(id)
        })
      )
    },
    //获取毕业证书
    getZczs(id) {
      this.$http.post("/employee/getZczs/" + id).then((res) => {
        if (res !== null) {
          this.image_zczs = this.$unzip(res["image"])
        } else {
          this.image_zczs = ""
        }
      });
    },
    //插入职称证书
    insertZczs() {
      const id = this.formLook.id
      this.uploadPicture(callback =>
        this.$http.post("/employee/insertZczs", {
          image: callback,
          employeeId: id
        }).then(() => {
          this.getZczs(id)
        })
      )
    },
    //获取身份证
    getSfz(id) {
      this.$http.post("/employee/getSfz/" + id).then((res) => {
        if (res !== null) {
          this.image_sfz = this.$unzip(res["image"])
        } else {
          this.image_sfz = ""
        }
      });
    },
    //插入身份证
    insertSfz() {
      const id = this.formLook.id
      this.uploadPicture(callback =>
        this.$http.post("/employee/insertSfz", {
          image: callback,
          employeeId: id
        }).then(() => {
          this.getSfz(id)
        })
      )
    },
    //获取驾驶本
    getJsb(id) {
      this.$http.post("/employee/getJsb/" + id).then((res) => {
        if (res !== null) {
          this.image_jsb = this.$unzip(res["image"])
        } else {
          this.image_jsb = ""
        }
      });
    },
    //插入驾驶本
    insertJsb() {
      const id = this.formLook.id
      this.uploadPicture(callback =>
        this.$http.post("/employee/insertJsb", {
          image: callback,
          employeeId: id
        }).then(() => {
          this.getJsb(id)
        })
      )
    },
  },
  mounted() {
    this.getDataList();
    this.getEmployeeSearchOption();
  },
};


</script>
<style>
.title1 {
  display: flex;
  margin-left: 150px;
}
</style>
